<%--
  Created by IntelliJ IDEA.
  User: jiang
  Date: 2021/7/22
  Time: 9:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>权限管理</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/component/pear/css/pear.css"/>
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <table id="power-table" lay-filter="power-table"></table>
    </div>
</div>

<script type="text/html" id="power-toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </button>
    <button class="pear-btn pear-btn-success pear-btn-md" lay-event="expandAll">
        <i class="layui-icon layui-icon-spread-left"></i>
        展开
    </button>
    <button class="pear-btn pear-btn-success pear-btn-md" lay-event="foldAll">
        <i class="layui-icon layui-icon-shrink-right"></i>
        折叠
    </button>
</script>

<script type="text/html" id="power-bar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i>
    </button>
</script>

<script type="text/html" id="power-type">
    {{#if (d.type == '0') { }}
    <span>目录</span>
    {{# }else if(d.type == '1'){ }}
    <span>菜单</span>
    {{# }else if(d.type == '2'){ }}
    <span>按钮</span>
    {{# } }}
</script>

<script type="text/html" id="power-enable">
    <input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable"
           checked="{{ d.id == 10003 ? 'true' : 'false' }}">
</script>

<script type="text/html" id="icon">
    <i class="layui-icon {{d.icon}}"></i>
</script>

<script type="text/html" id="power-form-add">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" action="" lay-filter="power-form-add">
                <div class="layui-form-item">
                    <label class="layui-form-label">上级目录</label>
                    <div class="layui-input-block">
                        <input type="hidden" name="parentId">
                        <ul id="dataTree" class="dtree" data-id="0"></ul>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" lay-verify="required" autocomplete="off"
                               placeholder="请输入名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">权限标识</label>
                    <div class="layui-input-inline">
                        <input type="text" name="tag" placeholder="请输入权限标识" lay-verify="required" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">类型</label>
                    <div class="layui-input-inline">
                        <select name="type">
                            <option value="0">目录</option>
                            <option value="1">菜单</option>
                            <option value="2">按钮</option>
                        </select>
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">链接地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="href" placeholder="" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">图标</label>
                    <div class="layui-input-block">
                        <input type="text" name="icon" lay-filter="iconPicker" id="iconPicker" class="layui-input">

                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-block">
                        <input type="number" name="sort" class="layui-input" value="0">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">展开/关闭</label>
                    <div class="layui-input-block">
                        <input type="radio" name="spread" class="layui-input" value="1" title="展开"/>
                        <input type="radio" name="spread" class="layui-input" value="0" title="关闭" checked/>
                    </div>
                </div>

                <div class="layui-form-item" style="text-align: center">
                    <div class="layui-inline">
                        <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="power-add">
                            <i class="layui-icon">&#xe605;</i>
                            确认
                        </button>
                        <button type="reset" class="pear-btn pear-btn-md">
                            <i class="layui-icon layui-icon-refresh"></i>
                            取消
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</script>

<script type="text/html" id="power-form-edit">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" action="" lay-filter="power-form-edit">

                <div class="layui-form-item">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-block">
                        <input type="hidden" name="id">
                        <input type="hidden" name="parentId">
                        <input type="text" name="title" lay-verify="required" autocomplete="off"
                               placeholder="请输入名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">权限标识</label>
                    <div class="layui-input-inline">
                        <input type="text" name="tag" placeholder="请输入权限标识" lay-verify="required" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">类型</label>
                    <div class="layui-input-inline">
                        <select name="type" disabled>
                            <option value="0">目录</option>
                            <option value="1">菜单</option>
                            <option value="2">按钮</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">链接地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="href" placeholder="" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">图标</label>
                    <div class="layui-input-block">
                        <input type="text" name="icon" lay-filter="iconPickerEdit" id="iconPickerEdit" class="layui-input">

                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-block">
                        <input type="number" name="sort" class="layui-input" value="0">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">展开/关闭</label>
                    <div class="layui-input-block">
                        <input type="radio" name="spread" class="layui-input" value="1" title="展开"/>
                        <input type="radio" name="spread" class="layui-input" value="0" title="关闭" checked/>
                    </div>
                </div>

                <div class="layui-form-item" style="text-align: center">
                    <div class="layui-inline">
                        <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="power-edit">
                            <i class="layui-icon">&#xe605;</i>
                            确认
                        </button>
                        <button type="reset" class="pear-btn pear-btn-md">
                            <i class="layui-icon layui-icon-refresh"></i>
                            取消
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</script>

<script src="${pageContext.request.contextPath}/resources/component/layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/resources/component/pear/pear.js"></script>
<script>
    layui.use(['table', 'form', 'jquery', 'treetable', 'dtree', 'iconPicker'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let dtree = layui.dtree;
        let treetable = layui.treetable;
        let iconPicker = layui.iconPicker;

        let MODULE_PATH = "operate/";

        window.render = function () {
            treetable.render({
                treeColIndex: 1,
                treeSpid: 0,
                treeIdName: 'id',
                // 必须与查询出来的树的父id对应
                treePidName: 'parentId',
                skin: 'line',
                treeDefaultClose: true,
                toolbar: '#power-toolbar',
                elem: '#power-table',
                url: '${pageContext.request.contextPath}/permission/findAll.do',
                page: false,
                cols: [
                    [
                        {type: 'checkbox'},
                        {field: 'title', minWidth: 200, title: '权限名称'},
                        {field: 'icon', title: '图标', templet: '#icon'},
                        {field: 'type', title: '权限类型', templet: '#power-type'},
                        {field: 'tag', title: '权限标识'},
                        {field: 'sort', title: '排序'},
                        {title: '操作', templet: '#power-bar', width: 150, align: 'center'}
                    ]
                ],
                response: {
                    statusCode: 200
                }
            });
        }

        render();

        table.on('tool(power-table)', function (obj) {
            if (obj.event === 'remove') {
                window.remove(obj);
            } else if (obj.event === 'edit') {
                window.edit(obj);
            }
        })


        table.on('toolbar(power-table)', function (obj) {
            if (obj.event === 'add') {
                window.add();
            } else if (obj.event === 'refresh') {
                window.refresh();
            } else if (obj.event === 'batchRemove') {
                window.batchRemove(obj);
            } else if (obj.event === 'expandAll') {
                treetable.expandAll("#power-table");
            } else if (obj.event === 'foldAll') {
                treetable.foldAll("#power-table");
            }
        });
        let mainIndex;
        window.add = function () {
            mainIndex = layer.open({
                type: 1,
                title: '新增',
                shade: 0.1,
                area: ['600px', '600px'],
                content: $("#power-form-add").html(),
                success: function (layero, index) {
                    form.render('radio');
                    form.render('select');
                    // 加载dtree的树形组件
                    dtree.renderSelect({
                        elem: "#dataTree",
                        url: "${pageContext.request.contextPath}/permission/loadDirectoryAndMenu.do",
                        dataStyle: "layuiStyle",  //使用layui风格的数据格式
                        dataFormat: "list",  //配置data的风格为list
                        response:{statusCode:200},  //修改response中返回数据的定义
                        // 给隐藏况赋值
                        selectInputName: {
                            nodeId: "parentId"
                        }
                    });

                    iconPicker.render({
                        // 选择器，推荐使用input
                        elem: '#iconPicker',
                        // 数据类型：fontClass/unicode，推荐使用fontClass
                        type: 'fontClass',
                        // 是否开启搜索：true/false
                        search: false,
                        // 点击回调
                        click: function (data) {
                            console.log(data);
                        }
                    });
                    /**
                     * 选中图标 （常用于更新时默认选中图标）
                     * @param filter lay-filter
                     * @param iconName 图标名称，自动识别fontClass/unicode
                     */
                    iconPicker.checkIcon('iconPicker', 'layui-icon-star-fill');
                }
            });
        }

        window.edit = function (obj) {
            mainIndex = layer.open({
                type: 1,
                title: '修改',
                shade: 0.1,
                area: ['600px', '650px'],
                content: $('#power-form-edit').html(),
                success:function(layero, index){
                    form.render('radio');
                    form.render('select');

                    iconPicker.render({
                        // 选择器，推荐使用input
                        elem: '#iconPickerEdit',
                        // 数据类型：fontClass/unicode，推荐使用fontClass
                        type: 'fontClass',
                        // 是否开启搜索：true/false
                        search: false,
                        // 点击回调
                        click: function (data) {
                            console.log(data);
                        }
                    });
                    /**
                     * 选中图标 （常用于更新时默认选中图标）
                     * @param filter lay-filter
                     * @param iconName 图标名称，自动识别fontClass/unicode
                     */
                    console.log(obj.data);
                    iconPicker.checkIcon('iconPickerEdit', obj.data.icon);
                    form.val('power-form-edit', obj.data);
                }
            });
        }
        window.remove = function (obj) {
            layer.confirm('确定要删除该权限', {icon: 3, title: '提示'}, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: '${pageContext.request.contextPath}/permission/delete.do?id=' + obj.data['id'],
                    type: 'post',
                    success: function (result) {
                        layer.close(loading);
                        if (result.code == 200) {
                            layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                                // 重新加载数据表格
                                window.location.reload();
                            });
                        } else {
                            layer.msg(result.msg, {icon: 2, time: 1000});
                        }
                    }
                })
            });
        }
        window.batchRemove = function (obj) {
            let data = table.checkStatus(obj.config.id).data;
            if (data.length === 0) {
                layer.msg("未选中数据", {
                    icon: 3,
                    time: 1000
                });
                return false;
            }
            let ids = "";
            for (let i = 0; i < data.length; i++) {
                ids += data[i].id + ",";
            }
            ids = ids.substr(0, ids.length - 1);
            layer.confirm('确定要删除这些权限', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: '${pageContext.request.contextPath}/permission/delete.do?id=' + ids,
                    type: 'post',
                    success: function (result) {
                        layer.close(loading);
                        if (result.code == 200) {
                            layer.msg(result.msg, {
                                icon: 1,
                                time: 1000
                            }, function () {
                                window.location.reload();
                            });
                        } else {
                            layer.msg(result.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    }
                })
            });
        }

        form.on('submit(power-add)', function (obj) {
            $.post("${pageContext.request.contextPath}/permission/add.do", obj.field, function (res){
                if(res.code == 200){
                    window.location.reload();
                    layer.close(mainIndex);
                }
                layer.msg(res.msg);
                return;
            });
            return false;
        })

        form.on('submit(power-edit)', function (obj) {
            $.post("${pageContext.request.contextPath}/permission/edit.do", obj.field, function (res){
                if(res.code == 200){
                    window.location.reload();
                    layer.close(mainIndex);
                }
                layer.msg(res.msg);
                return;
            });
            return false;
        })
    })
</script>
</body>
</html>